<template>
  <div>
      <!-- 密码输入框 -->
        <van-password-input
        :value="value"
        :error-info="errorInfo"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
        />
        <!-- 数字键盘 -->
        <van-number-keyboard
        :show="showKeyboard"
        @input="onInput"
        @delete="onDelete"
        @blur="showKeyboard = false"
        />
        <van-button type="warning" @click="canclePay">取消购买</van-button>
  </div>
</template>

<script>
export default {
    data() {
        return {
        value: '',
        showKeyboard: true,
        errorInfo: '',
            }
    },
    methods: {
        async onInput(key) {
            this.value = (this.value + key).slice(0, 6)
            if (this.value.length === 6) {
                const orderId  = this.$route.params.orderId
                const {data: res } =await this.$http.post('/api/order/updateOrderTrue',{orderId:orderId})
                    if (res.code !== 200) {
                        this.$toast('购买失败')
                        return 
                    }
                    this.$toast('购买成功')
                    this.$router.push('/main')
            }
            //  else {
            //     this.errorInfo = '密码错误'
            // }
        },
        onDelete() {
            this.value = this.value.slice(0, this.value.length - 1)
        },
        canclePay() {
            this.$router.push('/main')
        }
    }
}
</script>

<style lang="less" scoped>
.van-button {
    margin: 20px;
    width: 90%;
}
</style>